/*
 * @Author: guoyangf
 * @Date: 2020-08-03 15:29:31
 * @LastEditTime: 2020-08-03 16:13:47
 * @Description: file content
 */ 
import React, {
    Component
} from 'react';

import urgent1 from '../../../../../image/billnoOpr/urgent1.png'
import ismereject1 from '../../../../../image/billnoOpr/ismereject1.png'
import isleaderreject1 from '../../../../../image/billnoOpr/isleaderreject1.png'
import isappointed1 from '../../../../../image/billnoOpr/isappointed1.png'
import isunapprove1 from '../../../../../image/billnoOpr/isunapprove1.png'
import outerhandon from '../../../../../image/billnoOpr/outerhandon.png'

import cancelSign from '../../../../../image/billnoOpr/cancelSign.png'
import cancelApprove from '../../../../../image/billnoOpr/cancelApprove.png'
import cancelSettle from '../../../../../image/billnoOpr/cancelSettle.png'
import cancelAudit from '../../../../../image/billnoOpr/cancelAudit.png'

let setScreen = null, wrapper = null

class Showtipss extends Component {

    constructor() {
        super()
        this.state = {}
        setScreen = this.setScreen
    }

    componentDidMount() {
        wrapper = document.getElementsByClassName('tips-fixed--wrapper')[0]
    }

    showTipsHandler(showtips, ev) {
        if (!showtips.length) {
            return 
        }
        ev = ev || window.event
        setScreen(ev.clientX, ev.clientY, showtips)
    }

    setScreen = (x, y, showtips) => {
        wrapper.style.transform = 'scale(1)'
        wrapper.style.left = x + 5 + 'px'
        wrapper.style.top = y + 5 + 'px'
        this.props.setTipsWrapper(showtips)
    }

    hideTipsHandler = () => {
        wrapper.style.transform = 'scale(0)'
    }

    render() {
        const {billnoJSX, record, multiLang} = this.props.info

        let ret = [], showtips = [];
        let doneTabRet = [], doneTabShowTips = [];

        if(record.urgent && record.urgent.value == true){
            ret.push( <img fieldid="urgent_img" className='billno-img' src={urgent1}/>)//紧急
            showtips.push( <div><img src={urgent1}/><span className="showtipss">{multiLang['job-common-0056']}</span></div>)//紧急      
        }
        if(record.ismereject && record.ismereject.value == true){
            ret.push( <img fieldid="mereject_img" className='billno-img' src={ismereject1}/>)//本人驳回
            showtips.push(<div><img src={ismereject1}/><span className="showtipss">{multiLang['job-common-0057']}</span></div>)//本人驳回
        }
        if(record.isleaderreject && record.isleaderreject.value == true){
            ret.push( <img fieldid="leaderreject_img" className='billno-img' src={isleaderreject1}/>)//上级驳回
            showtips.push(<div><img src={isleaderreject1}/><span className="showtipss">{multiLang['job-common-0058']}</span></div>)//上级驳回
        }
        if(record.isappointed && record.isappointed.value == true){
            ret.push( <img fieldid="assign_img" className='billno-img' src={isappointed1}/>)//强制分配
            showtips.push(<div><img src={isappointed1}/><span className="showtipss">{multiLang['job-common-0055']}</span></div>)//强制分配
        }
        if(record.isunapprove && record.isunapprove.value == true){
            ret.push( <img fieldid="unapprove_img" className='billno-img' src={cancelApprove}/>)//取消审批
            showtips.push( <div><img src={cancelApprove}/><span className="showtipss">{multiLang['job-common-0169']}</span></div>)//取消审批
        } //
        if (record.taskstatus && record.taskstatus.value == 'outerhandon') {
            ret.push( <img fieldid="outerhandon_img" className='billno-img' src={outerhandon}/>)//外部挂起
            showtips.push( <div><img src={outerhandon}/><span className="showtipss">{multiLang['job-common-0184']}</span></div>)//外部挂起
        }

        if (record.iscmpreject && record.iscmpreject.value == true) {
            let iconJsx = <i className='cashier-reject-tip'>{multiLang['job-common-0203'] || '出纳驳回'}</i>;
            let tipsJsx = <div><img src=''/><span className="showtipss">{multiLang['job-common-0203'] || '出纳驳回'}</span></div>;
            ret.push(iconJsx)// 出纳驳回
            showtips.push(tipsJsx)//出纳驳回

            doneTabRet.push(iconJsx);
            doneTabShowTips.push(tipsJsx);
        }

        //已完成页签，只显示出纳驳回状态，其他状态不显示
        if (this.props.isDoneTab) {
            ret = doneTabRet;
            showtips = doneTabShowTips;
        }

        //我的结算 Start
        if (record.pk_sscnode  && record.isunapprove) {
            if (record.pk_sscnode.value == "0001ZG10000000NODE06" && record.isunapprove.value == 'Y') {
                ret.push( <img fieldid="unapprove_img" className='billno-img' src={cancelSign}/>)//取消签字
                showtips.push( <div><img src={cancelSign}/><span className="showtipss">{multiLang['job-settle-tips-qxqz']}</span></div>)//取消签字
            }
            if (record.pk_sscnode.value == "0001ZG10000000NODE07" && record.isunapprove.value == 'Y') {
                ret.push( <img fieldid="unapprove_img" className='billno-img' src={cancelSettle}/>)//取消结算
                showtips.push( <div><img src={cancelSettle}/><span className="showtipss">{multiLang['job-settle-tips-qxjs']}</span></div>)//取消结算
            }
        }
        if (record.def3 && ( record.def3.value == '2' || record.def3.value == '4')) {
            let iconJsx = <i className='cashier-reject-tip'>{multiLang['job-settle-tips-zfsb'] || '支付失败'}</i>; //支付失败
            let tipsJsx = <div><img src=''/><span className="showtipss">{multiLang['job-settle-tips-zfsb'] || '支付失败'}</span></div>;
            ret.push(iconJsx)
            showtips.push(tipsJsx)
        }
        //我的结算 End

        return (
            <div 
                onMouseEnter = {() => this.showTipsHandler(showtips)}
                onMouseLeave = {this.hideTipsHandler}
            >
                { billnoJSX }
                { [...ret] }
            </div>
        )
    }
}

export default Showtipss